@charset "utf-8";

@media (max-width:991px){
	.menu-box{ display: none; position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index:2147483645; padding-top: 80px; background: #fff;}
	.menu-box .menu{ position: relative; margin:0 auto; max-width: 160px; max-height: calc(100% - 80px); overflow-y:auto; }
	.menu-box .menu ul li{ margin-bottom: 20px; font-size: 0; line-height: 20px; }
	.menu-box .menu ul li span{ position: relative; display: inline-block; vertical-align: top; }
	.menu-box .menu ul li span a{ font-size: 14px; color: #333; }
	.menu-box .menu ul li span b{ position:absolute; left: -40px; top: 0; z-index: 1; width:20px; font-family: '宋体'; font-size: 14px; color: #333; cursor: pointer; }
	.menu-box .menu .ul{ display: none; }
	.menu-box .menu .ul .li{ margin-bottom: 20px; line-height: 20px; }
	.menu-box .menu .ul .li a{ color: #333; }
	.menu-btn{ position: absolute; top:20px; right: 15px; z-index:2147483647; width: 40px; height: 40px; }
	.menu-btn:before{ content: "×"; position: absolute; left: 0; top: 0; z-index: 2; width:100%; height: 100%; color: #fff; line-height: 40px; text-align: center; filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity: 0; opacity: 0; transition:all 0.3s;-webkit-transition:all 0.3s;-moz-transition:all 0.3s;-ms-transition:all 0.3s;-o-transition:all 0.3s; }
	.menu-btn b{ display: block; position: absolute; width:18px; height:18px; background: #f9b707; border-radius: 5px; }
	.menu-btn b:nth-child(1){ left: 1px; top: 1px; }
	.menu-btn b:nth-child(2){ left: 21px; top: 1px; }
	.menu-btn b:nth-child(3){ left: 1px; top: 21px; }
	.menu-btn b:nth-child(4){ left: 21px; top: 21px; }
	.menu-btn.active:before{filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity: 1; opacity: 1;}
	.menu-btn.active b{ margin:-9px 0 0 -9px;}
	.menu-btn.active b:nth-child(1){ left: 50%; top: 50%; }
	.menu-btn.active b:nth-child(2){ left: 50%; top: 50%; }
	.menu-btn.active b:nth-child(3){ left: 50%; top: 50%; }
	.menu-btn.active b:nth-child(4){ left: 50%; top: 50%; }
}

@media (max-width:767px){
	.menu-btn{  top: 14px; width: 32px; height: 32px; }
	.menu-btn:before{ line-height: 32px; }
	.menu-btn b{ width: 14px; height: 14px; }
	.menu-btn b:nth-child(2){ left: 16px;}
	.menu-btn b:nth-child(3){ top: 16px; }
	.menu-btn b:nth-child(4){ left: 16px; top: 16px; }
	.menu-btn.active b{ margin:-10px 0 0 -10px; width:20px; height: 20px; }	
}